<template>
	<view id='wx-login' class="wx-login-modal" :class="[showLoginModal ? 'buy-modal-show':'']">
		<view class="wx-login-con">
			<!-- <view class="close" @tap='close'>
				<uni-icons type='closeempty' size="20"></uni-icons>
			</view> -->
			<view class="title">告知书</view>
			<view class="box">
				<rich-text :nodes="detail"></rich-text>
			</view>
			<view class="box_btn" v-if="pay_about_status" @click="onsubmits()">
				<view class="hide">
					我已知晓
				</view>
			</view>
			
			<view class="box_btns" v-else>
				<view class="hide">
					我已知晓({{second}}s)
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name:"wx-login",
		props:{
			showLoginModal:Boolean
		},
		data() {
			return {
				isChecked:false,
				detail: '',
				second: 5,
				pay_about_status: false,
				good_id:'',
				buy_nums: '',
				interval: null
			};
		},
		watch: {
			showLoginModal: {
				immediate: true,
				handler(newV) {
					if( newV == true ){
						this.pay_about_status = false
						this.second = 5
						this.getCode()
					}
				},
			},
		},
		created() {
			this.xieyi_about()
			uni.$on('good_ids',(data)=>{
				this.good_id = data
			})
			uni.$on('buy_nums',(data)=>{
				this.buy_nums = data
			})
			
		},
		methods:{
			onsubmits(){
	
				this.$emit('onsubmits')
			},
			getCode(){
				this.interval = setInterval(() => {
					 --this.second
					 if( this.second <= 0 ){
						 clearInterval(this.interval)
						 this.second = 0
						 this.pay_about_status = true
					 }
				}, 1000)
			},
			// 告知书的显示
			xieyi_about(){
				app.globalRequest({
					api:app.getApi().mall.getAgreement,
					method:'get',
				}).then(response=>{
					console.log(response)
					if(response.code == 0){
						console.log(this.showLoginModal,'123')
						this.detail = response.data
						// this.getCode()
					}
				}).catch(err=>{
					
				})
			},
			
			
			chooseAg(){
				this.isChecked = !this.isChecked
			},
			/* 去登录 */
			toLogin(e) {
				let that = this;
				if(!that.isChecked){
					uni.showToast({
						title:'请阅读并同意《服务协议与隐私条款》',
						icon:'none',
						mask:true
					})
					return;
				}
				uni.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							app.globalRequest({
								api:app.getApi().loginApi.login,
								method:'POST',
								data:{
									code:res.code
								}
							}).then(response=>{
								if(response.code == 0){
									uni.setStorageSync('token',response.data.token_openid);
									that.$emit('close')
								}
							}).catch(err=>{
								
							})
						} 
					}
				})
			},
			close(){
		
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wx-login-modal{
		width: 100%;
		box-sizing: border-box;
		background: $dis-con-color;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		height: 1000rpx;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}
	.box{
		overflow-y: scroll;
		height: 750rpx;
		margin-top: 30rpx;
	}
	.wx-login-con{
		padding:30rpx 30rpx 40rpx;
		position: relative;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		.close{
			position: absolute;
			right: 30rpx;
			top:30rpx;
		}
	}
	.xieyi-wrap {
		margin: 54rpx 0rpx 0;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		.xieyi-text {
			padding-left: 10rpx;
			color:#707070;
		}
	
		text {
			color: #3780F0;
		}
	}
	.get-call {
		width: 100%;
		height: 80rpx;
		background: $dis-font-color;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #fff;
		margin-top:50rpx;
	}
	.buy-modal-show {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	.box_btn{
		width: 80%;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		color: #fff;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(82deg, #FF7040 0%, #EC1818 100%);
	}
	.box_btns{
		width: 80%;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		color: #1a1a1a;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: #efefef;
	}
</style>